<template>
  <view class="page">
    <view class="sticky-tabs">
      <view class="search">
        <u-search placeholder="请输入关键字搜索" v-model="model.assetsName" bgColor="#fff" @change="onchange"
          :showAction="false"></u-search>
        <view class="icon">
          <u-icon name="list-dot" color="#666666" size="28" @click="isPlay = true"></u-icon>
        </view>
        <!-- <view class="icon" @click="scan">
          <u-icon name="scan" color="#666666" size="28"></u-icon>
        </view> -->
      </view>
      <!-- <view class="tab">
        <u-tabs :list="list" @click="click"></u-tabs>
      </view> -->
      <u-gap height="10" bgColor="#f5f5f5"></u-gap>
      <view class="select">
        <view class="select-item" @click="selectHanlder(0)">
          <text>{{ num ? num : '资产大类' }}</text>
          <u-icon name="arrow-down-fill"></u-icon>
        </view>
        <view class="select-item" @click="selectHanlder(1)">
          <text>{{ num1 ? num1 : '资产小类' }}</text>
          <u-icon name="arrow-down-fill"></u-icon>
        </view>
        <view class="select-item" @click="selectHanlder(2)">
          <text>{{ num2 ? num2 : '存放地' }}</text>
          <u-icon name="arrow-down-fill"></u-icon>
        </view>
      </view>
    </view>

    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :sticky="true"
      :up="upOption">

      <view class="list">
        <view class="list-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.objectID)">
          <view class="list-item-left">
            <u-icon name="play-right-fill" color="#0d6fb8"></u-icon>
          </view>
          <view class="list-item-right">
            <view class="no">编号{{ item.assetsNo }}</view>
            <view class="name">{{ item.assetsName }}</view>
            <view>
              <text>申请人：{{ item.creatUserName ? item.creatUserName : '----' }} </text>
              <text>,</text>
              <text> 管理人：{{ item.account ? item.account : '----' }}</text>
            </view>
            <view>
              <text>存放地：{{ item.deposit }}</text>
            </view>
          </view>
          <view :class="item.inventory === true ? 'state' : 'stateTwo'">{{ item.inventory === true ? '已盘点' : '未盘点' }}
          </view>
          <view class="more"
            @click.stop="sheetShow = true; activeObjectid = item.objectID; activeAssetNo = item.assetsNo; printer = item">
            <u-icon name="setting" size="24"></u-icon>
          </view>
        </view>
      </view>
      <u-action-sheet :actions="sheetList" :title="title" :show="sheetShow" :closeOnClickOverlay="true"
        @select="selectClick" @close="sheetShow = false" :closeOnClickAction="true" cancelText="取消">
      </u-action-sheet>
    </mescroll-body>

    <tab-bar :currentPage="1"></tab-bar>
    <!-- 资产大类 -->
    <u-picker :show="selectShow" :columns="columns" @cancel="selectShow = false" @close="selectShow = false"
      @confirm="confirm" keyName="label" closeOnClickOverlay></u-picker>
    <!-- 资产小类 -->

    <u-popup height="90%" mode="bottom" :show="information.selection">
      <selection @onClick="onClick" @onClickCancel="onClickCancel" v-if="information.selection"
        :assetsClass="information.assetsClass">
      </selection>
    </u-popup>

    <!-- 右边弹出 -->
    <u-popup mode="bottom" closeable :show="isPlay" @close="isPlay = false">
      <view class="foor">
        <search :modelList="model" @change="change" @changeClose="changeClose"></search>
      </view>
    </u-popup>

    <!-- 存放地： -->
    <u-popup mode="bottom" :show="isDeposit" @close="isDeposit = false">
      <view class="foor">
        <deposit @changeCancel="changeCancel" @onDeposit="onDeposit"></deposit>
      </view>
    </u-popup>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import selection from "@/components/search/tree/selection.vue"
import search from "@/components/search/list.vue"
import deposit from "@/components/deposit/index.vue"
import { getAssets, addAssets } from "@/common/utils";
export default {
  mixins: [MescrollMixin], // 使用mixin
  components: {
    selection,
    search,
    deposit
  },

  data() {
    return {
      printer: {},//打印机内容
      keyword: '',
      activeObjectid: '',
      activeAssetNo: '',
      list: [{
        name: '已登记',
      }, {
        name: '未入账',
      }],
      dataList: [],
      columns: [],
      selectShow: false,
      sheetList: [{
        name: '修改',
        index: 0
      },
      {
        name: '转移',
        index: 1
      },
      {
        name: '打印标签',
        index: 2
      },
      {
        name: '操作日志',
        index: 3
      }
      ],
      sheetShow: false,
      information: {
        selection: false
      },
      model: {
        assetsNo: "",
        assetsName: "",
        assetsClass: "",
        assetsSubclass: "",
        assetsModel: "",
        assetsFormation: "",
        manufactor: "",
        depository: "",
        purchase: "",
        user: "",
        depositary: "",
        deposit: "",
        registerStartDate: "",
        registerEndDate: "",
        getDateStart: "",
        getDateEnd: "",
        priceMax: "",
        priceMin: "",
        source: "",
        attribute: "",
        getMode: "",
        account: "",
        engineering: "",
        builtupArea: "",
        occupiedArea: "",
        busType: "",
        vehicleType: "",
        level: "",
        system: "",
        inventory: "",
        state: "",
        order: {
          orderParam: "",
          isAes: false
        },
        pageIndex: 1,
        pageSize: 10,
        seachType: 1, //0 查询全部资产 1查询我的资产
      },
      num: '资产大类',
      num1: '资产小类',
      num2: '所在地',
      typeIndex: 0,
      information: {
        selection: false,
        assetsClass: ''
      },
      upOption: {
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量
          time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
        },
        noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        textNoMore: '-- 无更多数据 --', // 没有更多数据的提示文本
      },
      isPlay: false,
      isDeposit: false
    }
  },
  onLoad(e) {
    if (e) {

      this.model.assetsName = e.search
      this.model.seachType = e.seachType ? e.seachType : 1
      this.model.depository = e.depository
      if (e.val) {
        this.model = JSON.parse(e.val)
      }
      // this.dataList = []
      // this.mescroll.resetUpScroll();
    }
  },
  methods: {
    scan() {
      // 允许从相机和相册扫码
      var _this = this
      uni.scanCode({
        success: function (res) {
          const id = JSON.parse(JSON.stringify(res.result)) //这是我要取的值
          _this.carId = id
          if (res) {
            _this.carDetail()
          }

        }
      });
    },
    change(kk) {
      this.isPlay = false
      this.model = kk
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    changeClose() {
      this.isPlay = false
    },
    // 搜索
    onchange(e) {
      this.model.assetsName = e
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.model.pageIndex = page.num
      this.model.pageSize = page.size
      this.model.seachType = this.model.seachType
      this.$u.api.GetSeachList(this.model).then(res => {
        console.log(res.data, '88')
        //后台接口有返回列表的总数据量 totalSize
        this.mescroll.endBySize(res.data.length, res.count); //必传参数(当前页的数据个数, 总数据量)
        //设置列表数据
        if (this.model.pageIndex == 1) this.dataList = []; //如果是第一页需手动制空列表
        this.dataList = this.dataList.concat(res.data); //追加新数据

      }).catch(() => {
        //联网失败, 结束加载
        this.mescroll.endErr();
      })
    },
    selectHanlder(index) {
      this.typeIndex = index
      if (this.typeIndex == 0) {
        this.selectShow = true
        this.GetClassOption()
      } else if (this.typeIndex == 1) {
        if (!this.information.assetsClass) return this.$u.toast('请先选择资产大类')
        this.information.selection = true
      } else {
        this.isDeposit = true
      }
    },

    // 存放地子组件取消
    changeCancel() {
      this.isDeposit = false
    },

    onDeposit(kk) {
      this.model.deposit = kk
      this.num2 = kk
      this.isDeposit = false
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    // 资产大类
    GetClassOption() {
      this.$u.api.GetClassOption().then((res) => {
        const data = res.data.map((x) => {
          return {
            id: x.objectID,
            label: x.className
          }
        })
        this.columns = [data]

      })
    },

    confirm(e) {

      if (this.typeIndex == 0) {
        this.information.assetsClass = e.value[0].id
        this.model.assetsClass = e.value[0].label
        this.num = e.value[0].label
        this.selectShow = false
        this.dataList = []
        this.mescroll.resetUpScroll();
      }
      // else if (this.typeIndex == 1) {
      // 	// this.information.assetsClass = e.value[0].id
      // 	this.model.assetsSubclass = e.value[0].label
      // 	this.num1 = e.value[0].label
      // 	this.information.selection = false
      // }


    },
    // 资产小类
    onClick(user) {
      this.information.selection = false
      if (user) {
        this.model.assetsSubclass = user
        this.num1 = user
        this.dataList = []
        this.mescroll.resetUpScroll();
      }
    },
    // 取消
    onClickCancel() {
      this.information.selection = false
    },
    toDetail(val) {
      uni.navigateTo({
        url: '/pages/assetlist/detail?id=' + val
      });
    },
    selectClick(val) {
      if (val.index == 0) {
        uni.navigateTo({
          url: '/pages/assetlist/detail?id=' + this.activeObjectid
        });
      } else if (val.index == 1) {
        uni.navigateTo({
          url: '/pages/assetShift/index?id=' + this.activeObjectid
        });
      } else if (val.index == 2) {
        // this.onBlue()
        uni.navigateTo({
          url: '/pages/printer/home/home'
        });
        addAssets(this.printer)
      }

      else if (val.index == 3) {
        uni.navigateTo({
          url: '/pages/operationLog/list?assetNo=' + this.activeAssetNo
        });
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 100rpx;
  background: #fff;

  .foor {
    height: 93vh;
    overflow-y: auto;
    padding-bottom: 50px;
  }

  .search {
    padding: 20rpx 30rpx;
    background: #f5f5f5;
    display: flex;

    .icon {
      margin-left: 30rpx;
    }
  }

  .tab {
    background: #fff;

    /deep/.u-tabs__wrapper__nav__item {
      width: 50%;
      box-sizing: border-box;
    }
  }

  .select {
    padding: 18rpx 0;
    height: 64rpx;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-bottom: 1rpx solid #f5f5f5;

    .select-item {
      display: flex;
      width: 33%;
      justify-content: space-around;

      &:nth-child(2) {
        border-right: 1rpx solid #f5f5f5;
        border-left: 1rpx solid #f5f5f5;
      }
    }
  }

  .list {
    .list-item {
      display: flex;
      position: relative;
      padding: 20rpx 30rpx;
      border-bottom: #f5f5f5 1rpx solid;

      .list-item-left {
        margin-right: 20rpx;
        display: flex;
      }

      .list-item-right {
        view {
          font-size: 24rpx;
          line-height: 36rpx;
          color: #999999;
        }

        .no {
          font-size: 24rpx;
          line-height: 36rpx;
          color: #999999;
        }

        .name {
          font-family: PingFang-SC-Bold;
          font-size: 30upx;
          font-weight: normal;
          letter-spacing: 0px;
          color: #333333;
        }
      }

      .state {
        position: absolute;
        top: 30rpx;
        right: 0;
        width: 110rpx;
        height: 48rpx;
        line-height: 48rpx;
        color: #fff;
        text-align: center;
        background-color: #e7605d;
        border-radius: 24rpx 0px 0px 24rpx;
        font-size: 24rpx;
      }

      .stateTwo {
        position: absolute;
        top: 30rpx;
        right: 0;
        width: 110rpx;
        height: 48rpx;
        line-height: 48rpx;
        color: #fff;
        text-align: center;
        background-color: #42ae4b;
        border-radius: 24rpx 0px 0px 24rpx;
        font-size: 24rpx;
      }

      .more {
        position: absolute;
        bottom: 30rpx;
        right: 20rpx;
      }
    }
  }
}

.sticky-tabs {
  z-index: 990;
  position: sticky;
  top: var(--window-top);
  background-color: #fff;
}
</style>
